<template>
  <div>
    <div class="title">周末去哪儿</div>
    <ul>
      <li class="item border-bottom" v-for="item in weekendList" :key="item.id">
        <div class="item-img-wrapper">
            <img :src="item.imgUrl" alt="" class="item-img">
        </div>
        <div class="item-info">
          <p class="item-title item-p">{{item.title}}</p>
          <p class="item-desc item-p">{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HoemWeekend',
  // data () {
  //   return {
  //     recommendList: [{
  //       id: '001',
  //       imgUrl: 'https://imgs.qunarzz.com/sight/source/1505/74/98a840f2a881b.jpg_r_640x214_1bf94c8e.jpg',
  //       title: '陕西温泉季',
  //       desc: '养生、养性、养心的理想之地，曲径通幽，鸟语花香，让您在远离喧嚣之地享受终南隐士生活。'
  //     }, {id: '002',
  //       imgUrl: 'https://imgs.qunarzz.com/sight/source/1505/19/58f233e11df7ef.jpg_r_640x214_6b42c9fc.jpg',
  //       title: '西安必打卡',
  //       desc: '寻长安梦，开启穿越的圆梦之旅'
  //     }, {id: '003',
  //       imgUrl: 'https://imgs.qunarzz.com/sight/source/1505/8a/d412db9fcd44dd.jpg_r_640x214_86f303a2.jpg',
  //       title: '苏州必打卡',
  //       desc: '苏州必须要留下足迹的十个地标'
  //     }, {id: '004',
  //       imgUrl: 'https://imgs.qunarzz.com/sight/source/1811/65/7322301be0a92c.jpg_r_640x214_a3485c55.jpg',
  //       title: '摩崖石刻造像',
  //       desc: '诸事不顺，来抱佛脚，中国最壮观的大佛大盘点~来一场真正的“佛”系之旅，乐山大佛是首选'
  //     }, {id: '005',
  //       imgUrl: 'https://imgs.qunarzz.com/sight/source/1511/bd/c3c1145e1f7102.jpg_r_640x214_b9969c68.jpg',
  //       title: '广西温泉圣地',
  //       desc: '冬天里的风情，广西泡温泉的好去处'
  //     } ]
  //   }
  // }
  props: {
    weekendList: Array
  }
}
</script>

<style scoped>
  .title{
    margin-top: .2rem;
    line-height: .8rem;
    background: #eee;
    text-indent: .2rem;
  }
  .item{
    border-bottom: 5px solid #eee;
  }
  .item-img-wrapper{
    overflow: hidden;
    height: 0;
    padding-bottom: 37.09%;
  }
  .item-img{
   width: 100%;
  }
  .item-info{
    padding: .1rem;
  }
  .item-title{
    line-height: .54rem;
    font-size: .28rem;
  }
  .item-desc{
    line-height: .4rem;
    font-size: .24rem;
  }
  .item-p{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
     text-indent: .1rem;
  }
</style>
